<template>
  <div class="warpper-box inductionInfo">
    <a-card style="margin-top: 10px;">
      <a-form layout="inline" :form="events_form">
        <a-form-item label="残疾人姓名">
          <a-input placeholder="残疾人姓名" v-decorator="['disabledName']"></a-input>
        </a-form-item>
        <a-form-item label="所属公司">
          <a-input placeholder="所属公司" v-decorator="['enterpriseName']"></a-input>
        </a-form-item>
        <a-form-item label="操作时间">
          <a-range-picker v-model="rangeDate" @change="rangeChange" valueFormat="YYYY-MM-DD"></a-range-picker>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' @click="loadTable(true)">查询</a-button>
          <a-button type='primary' @click="reset">重置</a-button>
          <a-button type="warning" @click="exportTable">导出</a-button>
          <a-button type="danger" @click="downloadTable" :disabled="selectedRowKeys.length == 0">批量下载</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <span slot="imgUrls" slot-scope="text, record">
          <template>
            <viewer :images="record.imgUrls">
              <img v-for="(src, index) in record.imgUrls" :src="src" :key="index" style="width:50px;height:50px;margin-right:10px;cursor: pointer;">
            </viewer>
          </template>
        </span>
        <!-- 操作栏-->
        <span slot="action" slot-scope="text, record">
          <!-- 编辑模块 | 字段 -->
          <a @click="$refs.createInfo.add(record)">编辑</a>
          <span>
            <a-divider type="vertical" />
            <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="remove(record)">
              <a>删除</a>
            </a-popconfirm>
          </span>
        </span>
      </a-table>
    </a-card>
    <add-info ref="createInfo" @on-ok="addLoad"></add-info>
  </div>
</template>

<script>

import store from '@/store'
import AddInfo from "./publicize_add.vue"
import {
  COLUMNS_PUBLICIZE
} from "./form"
import {
  getPageDisabledBusiness,
  deleteBusiness,
  exportDisabledBusiness,
  exportDisabledBusinessImg
} from "@/api/human/disabled"
import { mapGetters,mapActions } from 'vuex'
export default {
  name: 'inductionList',
  components: {
    AddInfo
  },
  data() {
    return {
      table: {
        columns: COLUMNS_PUBLICIZE,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
      selectedRowKeys: [], // 选择的table数据id
      selectedRows: [], // 选择的table数据
      
      rangeDate: [], // 日期范围
      disabledActionStartTime: "",
      disabledActionEndTime: "",
      staffId: "",
    }
  },
  filters: {
    filterMore(value, num) {
      if (!value) return ''
      if (value.length > num) {
        return value.slice(0, num) + '...'
      }
      return value
    }
  },
  mounted() {
    this.staffId = this.$route.query.staffId || "";
    this.loadTable(true);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    
  },
  methods: {
    // table复选框选择
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
      this.selectedRows = selectedRows;
    },
    // 日期选择
    rangeChange(e) {
      this.disabledActionStartTime = e[0];
      this.disabledActionEndTime = e[1];
    },
    // 获取企业员工列表
    async loadTable(flag) {
      let params = this.events_form.getFieldsValue();
      params.disabledActionStartTime = this.disabledActionStartTime;
      params.disabledActionEndTime = this.disabledActionEndTime;
      params.staffId = this.staffId;
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getPageDisabledBusiness(params);
      if (code == '1') {
        this.table.loadData = data.content || [];
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导出功能
    exportTable() {
      let params = this.events_form.getFieldsValue();
      params.disabledActionStartTime = this.disabledActionStartTime;
      params.disabledActionEndTime = this.disabledActionEndTime;
      exportDisabledBusiness(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业宣传记录.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 批量下载
    downloadTable() {
      let params = {
        ids: this.selectedRowKeys
      };
      exportDisabledBusinessImg(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业宣传记录图片.zip';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    
    // 删除列表数据
    async remove(item) {
      let params = {
        id: item.id
      }
      const {
        code
      } = await deleteBusiness(params);
      if (code == '1') {
        this.$message.success('删除成功');
        this.loadTable(true);
      }
    },
    addLoad() {
      this.loadTable(true);
    },
    reset() {
      this.events_form.resetFields();
      this.rangeDate = [];
      this.disabledActionStartTime = "";
      this.disabledActionEndTime = "";
      this.loadTable(true);
    },
  }
}
</script>
